<template>
  <el-dialog title="分配角色" :visible="showRolesList" @close="closeFn">
    <el-checkbox-group v-model="checkedList">
      <!--  -->
      <el-checkbox v-for="item in rolesList" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="assignRoleFn">确定</el-button>
        <el-button size="small" @click="closeFn">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getRoleLists } from '@/api/role'
import { getUserDetail, editEmployee } from '@/api/employees'
export default {
  props: {
    showRolesList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rolesList: [], // 角色列表
      checkedList: [], // 选中的角色
      employeeDetail: {}
    }
  },
  async created() { // 获取角色列表
    this.rolesList = await getRoleLists()
    console.log(this.rolesList)
  },
  methods: {
    closeFn() { // 关闭
      this.$emit('update:showRolesList', false)
    },
    async getUserDetailFn(id) { // 获取员工详情
      const res = await getUserDetail(id)
      this.checkedList = res.roles.map(item => item.id) // 提取出id
      this.employeeDetail = res // 员工个人信息
    },
    async assignRoleFn() { // 分配
      this.employeeDetail.roles = this.checkedList // 选中的角色id赋值给员工
      await editEmployee(this.employeeDetail)
      this.$message.success('操作成功')
      this.closeFn()
    }
  }
}
</script>

<style>

</style>
